<template>
    <div class="center">
      <!-- 头像整体 -->
      <div class="top">
        <div class="user">
          <img
            class="pic"
            src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png"
            @click="toLogin"
            alt=""
          />
          <div class="name">
            <div class="nickName">{{useUserStore.name}}</div>
            <div>普通用户</div>
          </div>
        </div>
        <div class="right">
          <div class="QRCode"></div>
          <div class="VIP">
            <div class="pic"></div>
            <div class="VIPMain">
              <div class="words">Pro会员</div>
              <div class="words">立即开通 ></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 资产部分 -->
      <div class="asset">
        <div class="title">我的资产</div>
        <div class="allMoney">
          <div class="item">
            <div class="price">¥ 0</div>
            <div>余额</div>
          </div>
          <div class="item">
            <div class="price">0</div>
            <div>红包</div>
          </div>
          <div class="item">
            <div class="price">0</div>
            <div>优惠券</div>
          </div>
          <div class="item">
            <div class="price">0</div>
            <div>积分</div>
          </div>
          <div class="item">
            <div class="price">0</div>
            <div>礼品卡</div>
          </div>
        </div>
      </div>
      
      <!-- 底部分类 -->
      <div class="bottom">
        <van-grid :column-num="3">
          <van-grid-item icon="label-o" text="我的订单" />
          <van-grid-item
          icon="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png"
          text="账号管理"
        />
        <van-grid-item icon="phone-o" text="我的手机号" />
        <van-grid-item icon="label-o" text="周六一起拼" />
        <van-grid-item icon="balance-pay" text="售后服务" />
        <van-grid-item icon="label-o" text="邀请返利" />
        <van-grid-item icon="label-o" text="优先购" />
        <van-grid-item icon="after-sale" text="积分中心" />
        <van-grid-item icon="vip-card-o" text="会员俱乐部" />
        <van-grid-item icon="location-o" text="地址管理" />
        <van-grid-item icon="shield-o" text="支付安全" />
        <van-grid-item icon="service-o" text="帮助与客服" />
        <van-grid-item icon="records" text="意见反馈" />
        <van-grid-item icon="label-o" text="我的竞拍" />
        </van-grid>
      
      </div>
      <!-- 退出登录 -->
      <div class="btn">
        <van-button type="default" block @click="toLogout">退出登录</van-button>
      </div>

    </div>
  </template>
  
  <script setup lang="ts">
    import { nextTick,onMounted } from 'vue';
    import { useUserInfoStore } from '../../store/user';
    import { useRoute, useRouter } from 'vue-router';
    const useUserStore = useUserInfoStore();
    const router = useRouter()
    // 页面挂载重新获取数据
    onMounted(async() => {
      await useUserStore.uerxinxi()
    })
    // 跳转到登录页面
    const toLogin = () => {
      if ( useUserStore.name ) {return};
      router.push('/login')
    }

    

    // 退出登录,删除本地存储的token，删除仓库的数据,跳转到首页
    const toLogout = async () => {
      await useUserStore.userLogout();
      router.push('/home')
      alert('退出登录成功')
    }

    
  
  </script>
  
  <style scoped lang="less">
  .center {
    width: 100%;
    
    .top {
      height: 135px;
      padding-left: 15px;
      display: flex;
      justify-content: space-between;
      background-image: url(./image/bg.png);
      background-repeat: no-repeat;
      background-size:100%;
  
      .user {
        display: flex;
        align-items: center;
  
        .pic {
          width: 71px;
          height: 71px;
          border-radius: 50%;
        }
  
        .name {
          padding-left: 15px;
          font-size: 14px;
          line-height:24px;
          color: #fff;
          .nickName {
            font-size: 0.5rem;
          }
        }
      }
  
      .right {
        width: 120px;
        height: 135px;
        display: flex;
        flex-direction: column;
        padding: 20px 0;
  
        .QRCode {
          width: 26px;
          height: 26px;
          margin-left: 80px;
          // display: inline-block;
          background-image: url(./image/code.png);
          background-repeat: no-repeat;
          background-size:100%
        }
        
        @keyframes vip{
          0%{
            right: 0;
          }
          100%{
            right: 10px;
          }
        }
        .VIP {
          position: relative;
          display: flex;
          align-items: center;
          background: #413b34;
          color: #f9e0c0;
          margin-top: 10px;
          border-radius: 50px 0 0 50px;
          animation: vip 0.3s linear 4 alternate;
          .pic {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            margin-left: 10px;
            background: #4c4742;
          }
  
          .VIPMain {
            padding-top: 8px;
            width: 111px;
            height: 42px;
            font-size: 12px;
            line-height: 16px;
            padding-left: 10px;
            
            .words{
              padding-left: 5px;
            }
          }
        }
      }
    }
  
    // 资产部分
    .asset {
      width: 100%;
      height: 140px;
      border-bottom: 10px solid #eee;
      .title {
        font-size: 14px;
        border-bottom: 1px solid #eee;
        height: 52px;
        line-height: 52px;
        margin-left:15px;
      }
  
      .allMoney {
        height: 80px;
        display: flex;
        font-size: 14px;
        align-items: center;
  
        .item {
          flex: 1;
          text-align: center;
          .price{
            font-size:14px;
            font-weight: bold;
            padding-bottom:5px;
          }
        }
      }
    
    }
    
       
    .btn{
      padding-top:20px;
      padding-bottom:10px;
      background-color:#eee;
    }
    
  }
  </style>
  